<template>
  <div>
    <label for="">add a todo</label>
    <input type="text" placeholder="例如：学习减肥" v-model="inputdata">
    <button @click="addtodo">add</button> 
   <ul>
    
    <todoitem 
    v-for="item in todothing"
    :key="item.id"
    :todo="item"
    @deleteitem="removeid"
    >
    </todoitem>
   </ul>
   
  </div>
</template>

<script>
import todoitem from './todoitem.vue'
export default {
  methods: {
    addtodo(){
      console.log(2);
      this.todothing.push({
        id:this.nextid++,
        title:this.inputdata
      })
      this.inputdata=''
    },
    removeid(a){
this.todothing=this.todothing.filter((item)=>{
  return item.id!=a
})

    }
  },
  components:{
    todoitem
  },
    data(){
      return {
        nextid:4,
        inputdata:"",
        todothing:[{
          id:1,
          title:"学习"
        },
        {
          id:2,
          title:"唱歌"
        },
        {
          id:3,
          title:"健身"
        },]
      }
    },
   

}
</script>

<style>

</style>